<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/nav.css">
  <title>实现底部导航栏</title>
</head>

<body>
  <div id="app">
    <h1>主页内容</h1>
    <my-footer></my-footer>
  </div>
  <template id="footer">
    <div class="bottom-navbar">
      <footer-item :name="item.title" :icon="item.icon" v-for="(item, index) in items" :key="index">
      </footer-item>
    
    </div>

  </template>
  <template id="footerItem">
    <div class="navbar-item">
      <img :src="icon" alt="图片无法显示">
      <span>{{name}}</span>
    </div>
  </template>
  <script src="js/vue.js"></script>
</body>
<script>
  var footerItem = {
    template: "#footerItem",
    props: ["name","icon"]
  }
  var footer = {
    template: "#footer",
    data() {
      return {
        items: [
          { title: '首页', icon: 'images/nav-icon-home.png' },
          { title: '商品分类', icon: 'images/nav-icon-category.png' },
          { title: '购物车', icon: 'images/nav-icon-cart.png' },
          { title: '个人中心', icon: 'images/nav-icon-user.png' }
        ]
      }
    },
    components: {
      "FooterItem": footerItem
    }
  }
  new Vue({
    el: "#app",
    components: {
      "MyFooter": footer
    }
  })
</script>

</html>